<template>
	<div class="index">
		<!-- 头部 -->
		<div class="header">
			<div class="logo">
				<i class="iconfont iconnew"></i>
			</div>
			<router-link class="search" to="/search">
				<i class="iconfont iconsearch"></i>
				<span>搜索新闻</span>
			</router-link>
			<router-link class="my" :to="'/my/?id=' + $route.query.id">
				<i class="iconfont iconwode"></i>
			</router-link>
		</div>
		<!-- 2.0 Tab 标签页 sticky 自动吸顶 -->
		<van-tabs v-model="active" sticky swipeable class="home-tabs">
			<van-tab :title="item.name" v-for="item in categorylist" :key="item.id">
				<!-- 测试用的接口，先成功打印出标题 -->
				<!-- <div style="height: 1500px"> -->
				<!-- <ul>
						<li v-for="item in newslist" :key="item.id">{{ item.title }}</li>
					</ul> -->
				<van-pull-refresh v-model="item.isLoading" @refresh="onRefresh" success-text="刷新成功">
					<van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
						<Mypost v-for="item2 in item.newslist" :key="item2.id" :post="item2"></Mypost>
						<!-- 空 -->
						<van-empty description="空空如也" v-if="item.newslist.length === 0" />
					</van-list>
				</van-pull-refresh>

				<!-- <van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
					<Mypost v-for="item2 in item.newslist" :key="item2.id" :post="item2"></Mypost>
				</van-list> -->
				<!-- </div> -->
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import {getcategoryAPI} from "@/apis/category";
import {getToken, getCate} from "@/utils/localData";
import {newslistAPI} from "@/apis/News";
import Mypost from "@/components/Mypost.vue";
export default {
	components: {
		Mypost,
	},
	data() {
		return {
			// 默认情况下，都是让头条项高亮，有 token 的话头条的下标是 1
			active: getToken() ? 1 : 0,
			categorylist: getCate() || [], // 栏目列表
			// newslist: [], // 新闻列表  用map 这个不需要了
			// loading: false,
			// finished: false, 必须写在后端返回的数据里 每个栏目都有自己的加载
		};
	},
	mounted() {
		const tabDom = document.querySelector(".van-sticky");
		tabDom.addEventListener("click", (e) => {
			// console.log(e.target.className);
			if (e.target.className.indexOf("van-sticky") !== -1) {
				this.$router.push({
					name: "column",
				});
			}
		});
	},
	async created() {
		if (this.categorylist.length === 0) {
			const res = await getcategoryAPI(); //获取栏目数据
			this.categorylist = res.data.data;
			// console.log(this.categorylist);
		} else {
			if (getToken()) {
				this.categorylist.unshift({id: 0, name: "关注", is_top: 1}, {id: 999, name: "头条", is_top: 1});
			} else {
				this.categorylist.unshift({id: 999, name: "头条", is_top: 1});
			}
		}
		this.categorylist = this.categorylist.map((item) => {
			return {
				...item, // 保留后端返回的栏目数据，
				newslist: [], // 每个栏目都有的新闻数据
				pageIndex: 1, // 每个栏目都有页码
				pageSize: 2, // 每个栏目的页容量
				loading: false, // loading=true，则显示 加载中... 提示，不会触发 onLoad 事件了
				finished: false, // finished=true，则显示 没有更多了 提示，也不会触发 onLoad 事件了，级别比 loading 更高
				isLoading: false, // isLoading=true，显示 下拉组件 的加载中提示
			}; //解构出来的是基础类型就是值传递，解构出来的是复杂类型就是引用传递，
		});
		console.log(this.categorylist);
		this.getpostdata(); // 调用封装后的获取列表数据函数
	},
	watch: {
		// 监听栏目下标的变化
		active() {
			// const activeid = this.categorylist[this.active].id;
			// // 根据栏目选中的栏目获取请求时所需的 id
			// const res2 = await newslistAPI({category: activeid});
			// // 根据栏目 id 获取栏目对应的新闻
			// console.log(res2);
			// this.categorylist[this.active].newslist=res2.data.data; // 新闻的数据绑定

			// 💥 如果点开了新的栏目，才需要进行加载栏目数据
			if (this.categorylist[this.active].newslist.length == 0) this.getpostdata();

			//如果当前栏目已有数据了，则不需要重复的发起数据请求
		},
	},
	methods: {
		// 下拉刷新组件触发的函数
		onRefresh() {
			//清空所有新闻
			this.categorylist[this.active].newslist = [];
			//数据更新 页码重置为 1
			this.categorylist[this.active].pageIndex = 1;
			// 数据更新  finished要改成false// 隐藏分页组件的加载完成提示
			this.categorylist[this.active].finished = false;
			//重新请求数据

			// 重新加载需要把loading改为true不然onLoad不触发 有Bug
			this.categorylist[this.active].loading = true;
			// 💥 将 loading 设置为 true，表示处于 List 加载状态

			this.getpostdata(); // 根据新的页码，重新请求数据
		},
		// 当列表即将滚动到底部时，自动触发onLoad函数
		onLoad() {
			this.categorylist[this.active].pageIndex++; // 当前栏目页码 +1
			this.getpostdata(); // 根据最新页码再请求栏目数据
			// console.log(this.categorylist[this.active].pageIndex);
		},
		async getpostdata() {
			// const activeid = this.categorylist[this.active].id;
			// const pageIndex = this.categorylist[this.active].pageIndex;
			// const pageSize = this.categorylist[this.active].pageSize;
			// // 根据栏目选中的栏目获取请求时所需的 id
			// const res2 = await newslistAPI(
			//     {
			//         category: activeid,
			//         pageIndex,
			//         pageSize
			//     });
			// // 根据栏目 id 获取栏目对应的新闻
			// console.log(res2);
			// this.categorylist[this.active].newslist.push(res2.data.data); // 新闻的数据绑定 res2.data.data是一个数组
			// console.log(this.categorylist);
			// 🎈解构数据来优化代码
			const {id: category, pageSize, pageIndex, newslist} = this.categorylist[this.active];
			// 根据栏目选中的栏目获取请求时所需的 id
			const res2 = await newslistAPI({
				category,
				pageIndex,
				pageSize,
			});
			// 根据栏目 id 获取栏目对应的新闻
			// console.log(res2);
			// 如果后端返回的数组已经为空(没有更多数据了)
			if (res2.data.data.length === 0) {
				// 需要主动显示加载完毕，finished = true，onLoad 就不会再触发了
				this.categorylist[this.active].finished = true;
				// console.log(1);
				// 没数据了 改成true
			}
			//引用关系
			// 把栏目对应的新闻放到栏目数组内
			newslist.push(...res2.data.data); // 新闻的数据绑定 res2.data.data是一个数组 需要展开出来
			// console.log(this.categorylist);

			// 这里直接使用解构不是引用关系 是值传递 是重新赋值  不是单纯的使用
			// 数据加载完毕后，需要主动隐藏加载中的提示
			this.categorylist[this.active].loading = false;
			// 需要主动隐藏下拉插件的加载中的提示
			this.categorylist[this.active].isLoading = false;
		},
	},
};
</script>

<style lang="less" scoped>
.home-tabs {
	/deep/ .van-sticky {
		padding-right: 45px;
		&::after {
			content: "+";
			position: absolute;
			right: 0;
			top: 0;
			font-size: 30px;
			width: 45px;
			height: 45px;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
		}
	}
}
.header {
	height: 50px;
	color: #fff;
	background-color: red;
	display: flex;
	justify-content: center;
	align-items: center;
	.logo {
		width: 70px;
		.iconfont {
			font-size: 70px;
		}
	}

	.search {
		flex: 1;
		height: 34px;
		line-height: 34px;
		border-radius: 17px;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.4);
		.iconfont {
			padding: 0 4px;
		}
	}

	.my {
		width: 50px;
		color: #fff;
		text-align: center;
		.iconfont {
			font-size: 25px;
		}
	}
}
</style>
